import { CSSProperties } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { GStyleSheet } from '@/utils/DarkMode';
import { BottomPopup } from '@/components/Modal/BottomPopup';
import { GButton } from '@/components/GButton';
import I18n from 'i18n-js';

interface IProps {
  style?: CSSProperties;
  errorList: string[];
  isOpen: boolean;
  closePopup: () => void;
}

const blePng =
  'https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/495101/media/bluetooth_tips_photo%403x_1677224655571.png';

  const locationPng =
  'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/photo_location_tips@3x_1741346374917.png';
const dstyles = GStyleSheet.create({
  blePopContainer: {
    height: Taro.getSystemInfoSync().screenHeight * 0.4,
    width: '100%',
    paddingTop: 35,
    paddingBottom: 25,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    marginBottom: 10,
  },
  subTitle: {
    fontSize: 15,
    color: '#999999',
  },
  link: {
    fontSize: 15,
    color: '#007AFE',
    marginTop: 10,
  },
  btn: {
    width: 120,
    height: 40,
  },
});

const ErrorItem = (props: {errorType: 'BLE' | 'LOCATION'}) => {
  const title = props.errorType === 'BLE' ? 
  I18n.t("TURN_ON_YOUR_PHONE'S_BLUETOOTH_PLZ") : 
  I18n.t('TURN_ON_YOUR_PHONE_LOCATION_PLZ');
  const png = props.errorType === 'BLE' ? blePng : locationPng;

  const tips = props.errorType === 'BLE' ? 
  I18n.t('蓝牙权限指引') : 
  I18n.t('位置权限指引');
  const styles = dstyles.useDynamicStyle();

  const imageHeight = props.errorType === 'BLE' ? 185 : 165;
  return (
    <View style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
      <Text style={styles.title}>{title}</Text>
        <Text style={styles.subTitle}>
          {I18n.t('USED_TO_SEARCH_FOR_AND_ADD_RELATED_FUNCTIONS_SUCH_AS_BLUETOOTH_DEVICES')}
        </Text>
        <Text onClick={() => {
          if(props.errorType === 'BLE') {
            Taro.navigateTo({
              url: '/pages/BleTips/index'
            })
          } else {
            Taro.navigateTo({
              url: '/pages/BleTips/location'
            })
          }
        }} style={styles.link}>{tips} {`>`}</Text>
        <Image src={png} style={{ width: 240, height: imageHeight, marginTop: 20 }} />
    </View>
  )
}
const BottomBlePopup: React.FC<IProps> = props => {
  const styles = dstyles.useDynamicStyle();
  return (
    <BottomPopup isOpen={props.isOpen} rounded onClose={props.closePopup}>
      <View style={{ ...styles.blePopContainer, ...props.style }}>
        {props.errorList.map(item => {
          return <ErrorItem errorType={item} />
        })}
        <View style={{height: 160, width: '100%', color: 'rgba(0,0,0,0)'}}>1</View>
      </View>
      <GButton
        text={<Text style={{ fontSize: 15, color: '#FFFFFF' }}>{I18n.t('I_KNOW')}</Text>}
        style={{...styles.btn, position: 'fixed', bottom: 20, left: '50%', marginLeft: -60}}
        onPress={props.closePopup}
      />
    </BottomPopup>
  );
};
export default BottomBlePopup;
